<template>
  <div>
    <div>
      <el-button v-show="showPay" type="success" @click="openAddDialog()">
        新增宿舍
        <el-icon>
          <Plus/>
        </el-icon>
      </el-button>
      <el-button v-show="showPay" type="danger" @click="deletePayAll()">
        删除宿舍
        <el-icon>
          <Close/>
        </el-icon>
      </el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{ 'text-align': 'center' }" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="Id" width="180" fit/>
      <el-table-column prop="number" label="宿舍号" width="180" fit/>
      <el-table-column prop="name" label="室长" fit/>
      <el-table-column prop="cost" label="水电费" fit/>
      <el-table-column fixed="right" label="操作" width="300">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="openUpdateDialog(scope.row)">
            缴费
          </el-button>
          <el-button link type="primary" size="small" @click="changeRoomMaster(scope.row)">
            修改室长
          </el-button>
          <el-button v-show="showPay" link type="primary" size="small" @click="deletePay(scope.row)">
            删除
          </el-button>
          <el-button v-show="showPay" link type="primary" size="small" @click="removePay(scope.row)">
            重置费用
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="example-pagination-block">
      <el-pagination layout="prev, pager, next" :total="total"/>
    </div>
    <div>
      <Add :get-dialog="addDialog" @close="close()"></Add>
      <Update :get-dialog="updateDialog" :get-info="tableInfo" @close="close()"></Update>
      <Change :get-dialog="changeDialog" :get-info="tableInfo" @close="close()"></Change>
    </div>
  </div>
</template>

<script>

import {Plus, Position, Close} from "@element-plus/icons";
import Add from "@/components/pay/add";
import Update from "@/components/pay/update";
import Change from "@/components/pay/change";
import {ElMessage} from "element-plus";
import axios from "axios";

export default {
  name: "table",
  components: {
    Update,
    Change,
    Add,
    Plus, Position, Close
  },
  props: {
    search: {
      type: Object,
      required: true
    }
  },
  watch: {
    'search.number': {
      handler(val) {
        this.form.number = val
        this.getPayTable()
      },
      deep: true
    }
  },
  data() {
    return {
      addDialog: false,
      updateDialog: false,
      changeDialog: false,
      form: {
        start: 0,
        end: 10
      },
      total: 0,
      tableData: [],
      ids: [],
      tableInfo: {},
      showPay: false
    }
  },
  methods: {
    getPayTable() {
      axios({
        url: "http://localhost:8888/dormitory/info/list",
        method: "post",
        data: this.form,
        headers: {
          token: localStorage.getItem("token")
        }
      }).then(res => {
        this.tableData = res.data
      })
    },
    changeRoomMaster(data) {
      this.changeDialog = true
      this.tableInfo = data
    },
    deletePay(data) {
      axios({
        url: `http://localhost:8888/dormitory/info/delete/` + data.id,
        method: "delete"
      }).then((res) => {
        if (res.data) {
          ElMessage({
            message: "删除成功",
            type: "success"
          })
          this.$router.go(0)
        } else {
          ElMessage({
            message: "删除失败",
            type: "warning"
          })
        }
      })
    },
    deletePayAll() {
      axios({
        url: `http://localhost:8888/dormitory/info/delete/` + this.ids,
        method: "delete"
      }).then((res) => {
        if (res.data) {
          ElMessage({
            message: "删除成功",
            type: "success"
          })
          this.$router.go(0)
        } else {
          ElMessage({
            message: "删除失败",
            type: "warning"
          })
        }
      })
    },
    removePay(data) {
      axios({
        url: "http://localhost:8888/dormitory/info/removePay",
        method: "put",
        data: data
      }).then(res => {
        if (res.data) {
          ElMessage({
            message: "重置成功",
            type: "success"
          })
          this.getPayTable()
        } else {
          ElMessage({
            message: "重置失败",
            type: "danger"
          })
        }
      })
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    openAddDialog() {
      this.addDialog = true
    },
    openUpdateDialog(data) {
      if (data == null) {
        ElMessage({
          message: "请选择单个修改的内容",
          type: "warning"
        })
      } else {
        this.tableInfo = data
        this.updateDialog = true
      }
    },
    close(value) {
      this.addDialog = value
      this.updateDialog = value
      this.changeDialog = value
      this.getPayTable()
    }
  },
  mounted() {
    let data = JSON.parse(localStorage.getItem("user"));
    if (data.roleId == 3) {
      this.showPay = false
    } else {
      this.showPay = true
    }
    this.getPayTable()
  }
}
</script>

<style scoped>

.example-pagination-block {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
}

.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}

</style>